<template>

  <view class="container">
    <!-- 管理员登陆 -->
    <view class="wrapper" v-show="current === 1">
      <view class="left-top-sign">登陆</view>
      <view class="welcome">
        一天不工作八小时我就浑身难受
      </view>
      <view class="input-content">
        <view class="input-item">
          <text class="tit">账号</text>
          <input type="text" placeholder="请输入账号" v-model="name" />
        </view>
        <view class="input-item">
          <text class="tit">密码</text>
          <input type="password" placeholder="请输入密码" v-model="password" />
        </view>
      </view>

    </view>
    <!-- 管理员注册 -->
    <view class="wrapper" v-show="current === 0">
      <view class="left-top-sign">注册</view>
      <view class="welcome">
        管理员注册
      </view>
      <view class="input-content">
        <view class="input-item">
          <text class="tit">账号</text>
          <input type="text" placeholder="请输入账号" v-model="admininfo.name" />
        </view>
        <view class="input-item">
          <text class="tit">密码</text>
          <input type="password" placeholder="请输入密码" v-model="admininfo.password" />
        </view>
        <view class="input-item">
          <text class="tit">确认</text>
          <input type="password" placeholder="请确认密码" v-model="admininfo.confirmPassword" />
        </view>
        <!-- <view class="input-item">
					<text class="tit">性别</text>
					<input type="text" placeholder="请输入性别" v-model="admininfo.sex" />
				</view> -->
        <view class="sex">
          <radio-group @change="handleGenderChange">
            <radio value="男">男</radio>
            <radio value="女">女</radio>
          </radio-group>
        </view>
      </view>

    </view>

    <view class="wrapper">
      <button class="confirm-btn" @click="adminLogin">{{current===1?'登录':'注册'}}</button>
      <view class="forget-section">
        <text class="link-text" @click="goBack"> 返回上一级页面</text>
      </view>
    </view>
    <view class="register-section">
      <text class="link-text" @click="navigateToRegister">{{current===0?'返回登陆':'立即注册'}}</text>
      <text class="link-text" @click="navigateToForgetPage">忘记密码</text>
    </view>
  </view>


</template>

<script>
  import store from '../../store/index.js' //需要引入store
  export default {
    data() {
      return {
        current: 1,
        id: '',
        name: '',
        password: '',
        admininfo: {
          name: '',
          password: '',
          confirmPassword: '',
          sex: '',
          image: '',
        },
      }
    },
    computed: {},
    methods: {
      // 返回上一级，页面跳转
      goBack() {
        uni.navigateBack()
      },
      navigateToForgetPage() {
        uni.navigateTo({
          url: '/pages/forget/forget'
        })
      },
      navigateToRegister() {
        this.current = this.current ^ 1
      },
      //获取单选框的值
      handleGenderChange(event) {
        this.admininfo.sex = event.detail.value;
      },
      // 管理员登陆注册
      adminLogin() {
        if (this.current === 1) {
          uni.request({
            url: 'http://localhost:3007/api/loginAdmin',
            method: 'POST',
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: {
              name: this.name,
              password: this.password
            },
            success: res => {
              console.log('res:', res)
              if (res.data.status === 0) {
                // 登录成功后将admin信息存储到state中
                // this.loginAdmin(res.data.data.admin)
                store.commit('loginAdmin', res.data.data.admin)
                store.commit('updatetToken', res.data.token)
                console.log('登录成功后的admininfo:', store.state.admin)
                uni.reLaunch({ url: '/subpkg/adminIndex/adminIndex' })

              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none',
                })
              }
            },
            fail: error => {
              console.error(error)
              uni.showToast({ title: '网络请求失败' })
            }

          })
        }
        // 注册
        if (this.current === 0) {
          uni.request({
            url: 'http://localhost:3007/api/regAdmin',
            method: 'POST',
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: {
              name: this.admininfo.name,
              password: this.admininfo.password,
              sex: this.admininfo.sex,
              image: this.admininfo.image
            },
            success: res => {
              console.log("res:", res)
              console.log("admininfo", this.admininfo)
              if (this.admininfo.password != this.admininfo.confirmPassword) {
                uni.showToast({
                  title: '两次密码不一致',
                  icon: 'none',
                })
              } else if (res.data.status === 0) {
                uni.showToast({
                  title: '注册成功请登录'
                })
                setTimeout(function() {
                  uni.navigateTo({
                    url: '/pages/adminLogin/adminLogin'
                  })
                }, 600)
              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none',
                })
              }
            },
            fail: error => {
              console.error(error)
              uni.showToast({
                title: '网络请求失败'
              })
            }

          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .wrapper {
    position: relative;
    z-index: 90;
    padding-bottom: 40rpx;
  }

  .left-top-sign {
    font-size: 120rpx;
    color: #f8f8f8;
    position: relative;
    left: -16rpx;
  }

  .welcome {
    text-align: center;
    position: relative;
    // left: 50rpx;
    top: -90rpx;
    font-size: 46rpx;
    color: #555;
  }


  .input-content {
    padding: 0 60rpx;
  }

  .input-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 30rpx;
    background: #f8f6fc;
    height: 115rpx;
    border-radius: 4px;
    margin-bottom: 50rpx;

  }

  .input-item:last-child {
    margin-bottom: 0;
  }

  .input-item .tit {
    height: 50rpx;
    line-height: 56rpx;
    font-size: 30rpx;
    color: #606266;
  }

  .input-item input {
    height: 60rpx;
    font-size: 30rpx;
    color: #303133;
    width: 100%;
  }

  .confirm-btn {
    width: 630rpx !important;
    height: 76rpx;
    line-height: 76rpx;
    border-radius: 50rpx;
    margin-top: 50rpx;
    background: #d43c33;
    color: #fff;
    font-size: 32rpx;
    padding: 0;
  }

  .confirm-btn2:after {
    border-radius: 100px;
  }

  .forget-section {
    font-size: 28rpx;
    color: #4399fc;
    text-align: center;
    margin-top: 40rpx;
  }

  .register-section {
    position: absolute;
    left: 0;
    bottom: 50rpx;
    width: 100%;
    font-size: 28rpx;
    color: #606266;
    text-align: center;

  }

  .register-section text {
    color: #4399fc;
    margin-left: 10rpx;
  }

  .sex {
    margin-top: 35rpx;
    text-align: center;
  }
</style>